<template>
    <div class="kefu-container">
        <Csr class="csr-box" v-if="kefu.state.userInfo.identity == 'csr'" />
    </div>
</template>

<script setup lang="ts">
import { isEmpty } from 'lodash-es'
import { setTitle } from '/@/utils/common'
import { onMounted, onUnmounted } from 'vue'
import type kefuClass from '/@/components/kefu/index'
import Csr from '/@/components/kefu/components/csr.vue'
import useCurrentInstance from '/@/utils/useCurrentInstance'
import { initialize } from '/@/api/frontend'
import kefuAffix from '/@/components/kefu/affix'

kefuAffix()
const { proxy } = useCurrentInstance()
const kefu = proxy.kefu as kefuClass

/**
 * 如果是客服代表禁用悬浮固钉，如果是用户直接打开弹窗
 */
const identityCheck = () => {
    if (!isEmpty(kefu.state.userInfo) && kefu.state.userInfo.id > 0) {
        if (kefu.state.userInfo.identity != 'csr') {
            kefu.toggleWindow(true)
        } else if (kefu.state.affix.show) {
            kefu.state.system.hideLock = true
            kefu.hideSystem()
        }
    }
}

onMounted(() => {
    
    identityCheck()
    kefu.hooks.userInitSuccess = () => identityCheck()

    if (kefu.config?.app_name) {
        setTitle(kefu.config.app_name)
    }
})

onUnmounted(() => {
    if (!isEmpty(kefu.state.userInfo) && kefu.state.userInfo.identity == 'csr') {
        kefu.state.system.hideLock = false
        kefu.showSystem()
    }
})

/**
 * 前端初始化请求，获取站点配置信息，动态路由信息等
 */
initialize()
</script>

<style scoped lang="scss">
.kefu-container {
    display: block;
    height: 100vh;
    width: 100vw;
    background: url(/@/assets/kefu/bg.png) no-repeat center;
    background-size: 700px 400px;
    padding: 15px;
    .csr-box {
        height: 100%;
    }
}
</style>
